<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script type="text/javascript" src="../dhtiny.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    
</head>
<body>
    Video ID <input id="videoid" type="text" value="24s5PjG1X2o"/> <button onclick="">Load</button><br />    
    <div id="rootbox" style="position:relative;left:0px;width:300px;height:240px;border: solid 2px green;">
        <div id ="rootvideo"></div>
    </div>    
    
<script type="text/javascript">
$dh.Require(["util/dragmanager"]);
$dh.addLoader(function() {
    putVideoTo($dh.getEl("videoid").value, "rootvideo");    
    
    var size = $dh.size($dh.getEl("rootbox"));
    makeParts($dh.getEl("videoid").value,size.width, size.height, 3, 3);
    
    $dh.disableSelect(document.body);
});

function putVideoTo(videoId, divId) {
    var params = { allowScriptAccess: "always", wmode: "opaque", border: 1, color1:"red", color2:"blue" };
    var atts = { "id": divId };
    //swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
    //swfobject.embedSWF("http://www.youtube.com/v/"+videoId+"&enablejsapi=1&playerapiid=player"+divId, divId, "100%", "100%", "8", null, null, params, atts);
    swfobject.embedSWF("http://www.youtube.com/v/"+videoId+"&enablejsapi=1&playerapiid="+divId, divId, "100%", "100%", "8", null, null, params, atts);
}

var videoList, loadedList;
function makeParts(videoid, width, height, ncol, nrow) {
    var w = Math.floor(width/ncol), h = Math.floor(height/nrow),space=4;
    var rx = 350, ry = 30;    
    videoList = [];
    loadedList = [];
        
    for (var i=0; i < nrow; i++)
    for (var j=0; j < ncol; j++) {
        var div = document.createElement("div");
        var dx = (w+space)* j, dy = (h+space)*i;
        var left = rx + dx, top = ry + dy;
        div.style.cssText = "display:block;position:absolute;top:"+top+"px;left:"+left+"px;width:"+w+"px;height:"+h+"px;overflow:hidden;border: solid 1px red;";
        div.id = "piece_"+i+"_"+j;
        
        var div2 = div.cloneNode(true);
        div2.style.cssText +=";width:"+width+"px;height:"+height+"px;left:"+(-w*j)+"px;top:"+(-h*i)+"px;z-index:0;overflow:hidden;";
        
        var player = document.createElement("div");
        player.style.cssText +=";position:absolute;top:0px;left:0px;overflow:hidden;";
        player.id = "player_"+i+"_"+ j;
        videoList.push(player.id);
        
        var mask = div.cloneNode(true);
        mask.id = "mask_"+i+"_"+j;
        mask.style.cssText +=";z-index:999;cursor:move;";
        $dh.css(mask, {bg: "blue", opac:20});
        
        document.body.appendChild(div);        
        div.appendChild(div2);
        document.body.appendChild(mask);
                
        div2.appendChild(player);        
        putVideoTo(videoid, player.id);
        
        setupDrag(mask, div);
    }    
}

function setupDrag(mask, div) {
    mask.canDrag = true;
    DHDRAG.setDrag(mask, { mode: "MOVE", noMask: true, ghostDrag: false});
    DHDRAG.addEv("ondragging", function(sender, ev) {
        var pieceID = "piece_"+ sender.activeObj.id.substr(5);
        var div = document.getElementById(pieceID);
        div.style.left = sender.activeObj.style.left;
        div.style.top  = sender.activeObj.style.top;
    });
}

function seekStep() {    
    for (var x =0; x < loadedList.length; x++) {
        var player = document.getElementById(loadedList[x]);
        player.seekTo(window.currentStep * 10, true);
        player.stopVideo();
    }
    setTimeout("seekStep", 5000);
}

YTU = {
    updateHTML: function(elmId, value) {
        document.getElementById(elmId).innerHTML = value;
    },
 
    setPlayerState: function(newState) {
        //this.updateHTML("playerstate", newState);
    },
 
    onPlayerReady: function(playerId) {
      for (var i =0; i < videoList.length; i++)
        if (videoList[i] == playerId) {
            loadedList.push(videoList[i]);
            videoList.splice(i,1);
            break;
        }
      
      if (videoList.length == 0) {        
         window.currentStep = 0;
         seekStep();
      }
      /*player = document.getElementById(playerId);
      //setInterval(this.updateytplayerInfo, 250);
      //this.updateytplayerInfo();      
      player.addEventListener("onStateChange", this.onPlayerStateChange);
      player.addEventListener("onError", this.onPlayerError);            */
    },

    onPlayerError: function(errorCode) {
       alert("An error occured: " + errorCode);
    },

    onPlayerStateChange: function(newState) {
       this.setPlayerState(newState);
    },

    updatePlayerInfo: function() {
       this.updateHTML("bytesloaded", this.getBytesLoaded());
       this.updateHTML("bytestotal", this.getBytesTotal());
       this.updateHTML("videoduration", this.getDuration());
       this.updateHTML("videotime", this.getCurrentTime());
       this.updateHTML("startbytes", this.getStartBytes());
       this.updateHTML("volume", this.getVolume());
    },

    // functions for the api calls
    loadNewVideo: function(player, id, startSeconds) {
        player.loadVideoById(id, parseInt(startSeconds));
    },

    cueNewVideo: function(player, id, startSeconds) {
        player.cueVideoById(id, startSeconds);
    },

    play: function(player) {
        player.playVideo();
    },

    pause: function(player) {
        player.pauseVideo();       
    },

    stop: function(player) {
        player.stopVideo();
    },

    getPlayerState: function(player) {
        return player.getPlayerState();
    },

    seekTo: function(player, seconds) {
        player.seekTo(seconds, true);
    },

    getBytesLoaded: function(player) {
        return player.getVideoBytesLoaded();
    },

    getBytesTotal: function(player) {
        return player.getVideoBytesTotal();
    },

    getCurrentTime: function(player) {
        return player.getCurrentTime();
    },

    getDuration: function(player) {
        return player.getDuration();
    },

    getStartBytes: function(player) {
        return player.getVideoStartBytes();
    },

    mute: function(player) {
        player.mute();
    },

    unMute: function(player) {
        player.unMute();
    },

    getEmbedCode: function(player) {
        return player.getVideoEmbedCode();
    },

    getVideoUrl: function(player) {
        return player.getVideoUrl();
    },

    setVolume: function (player, newVolume) {
        player.setVolume(newVolume);
    },

    getVolume: function(player) {
        return player.getVolume();
    },

    clearVideo: function(player) {
        ytplayer.clearVideo();
    }
};

window.onYouTubePlayerReady = YTU.onPlayerReady;

</script>

</body>
</html>
